<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    :title="dialogTitle"
    width="60%"
    @close="emits('closeDialog')"
  >
    <el-timeline style="padding-left: 50px">
      <el-timeline-item
        v-for="(item, index) in auditHistory"
        :timestamp="item.audit_level + '审：' + item.level_name"
        :type="item.type"
        :hollow="!item.his_order_id"
        placement="top"
      >
        <el-card shadow="never" v-if="item.his_order_id">
          <p>审核组：{{ item.his_group_name }}</p>
          <p>审核人：{{ item.his_audit_user }}</p>
          <p>审核时间：{{ formatDates(item.his_createtime) }}</p>
          <p>
            审核结果：<el-tag
              :type="item.his_audit_result == 'pass' ? 'success' : 'danger'"
              >{{ item.his_audit_result == "pass" ? "通过" : "拒绝" }}</el-tag
            >
          </p>
          <p v-if="item.his_remark">备注：{{ item.his_remark }}</p>
        </el-card>
        <el-card shadow="never" v-else>
          <p>审核组：{{ item.group_name }}</p>
          <!--<p>审核人：{{ item.audit_user }}</p>-->
          <p>审核状态：<el-tag type="warning">等待审核</el-tag></p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-form
      v-if="btnType == 'audit'"
      ref="dialogFormRef"
      :model="dialogForm"
      prop="country_code"
      :rules="rules"
    >
      <el-form-item label="充值金额" :label-width="formLabelWidth">
        <el-tag type="danger"
          >{{ dialogForm.amount }} {{ dialogForm.currency }}</el-tag
        >
      </el-form-item>
      <el-form-item
        label="警告信息"
        :label-width="formLabelWidth"
        prop="warning_result"
        v-if="dialogForm.warning === 2"
      >
        <el-checkbox
          v-model="dialogForm.warning_result"
          @change="selectCheckbox"
          label="确认金额无误"
          >
        </el-checkbox> <el-alert type="warning" :title="dialogForm.warning_msg" :closable="false" show-icon style="color:red"></el-alert>
      </el-form-item>
      <el-form-item
        label="审核结果"
        :label-width="formLabelWidth"
        prop="review_status"
      >
        <el-radio-group v-model="dialogForm.review_status">
          <el-radio key="1" label="1">通过</el-radio>
          <el-radio key="2" label="2">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="审核意见"
        :label-width="formLabelWidth"
        prop="review_reason"
      >
        <el-input v-model="dialogForm.review_reason" type="textarea" rows="3" />
      </el-form-item>
      <el-form-item label="银行实际到账金额" :label-width="formLabelWidth">
        <el-input
          v-model="dialogForm.actual_recharge_amount"
          type="number"
          placeholder="不填写则默认为订单充值金额"
        />
      </el-form-item>
      <el-form-item label="银行实际到账时间" :label-width="formLabelWidth">
        <el-date-picker
          clearable
          v-model="dialogForm.receive_actual_time"
          type="datetime"
          placeholder="不填写则默认为审核时间"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="* 收款凭证" :label-width="formLabelWidth">
        <el-upload
          :file-list="fileList"
          :action="uploadimgUrl"
          :data="{ project_code: 'pay_service' }"
          :on-success="handleUploadSuccess"
          :headers="TOKENT_HEADER"
          list-type="picture-card"
        >
          <el-icon>
            <Plus />
          </el-icon>
          <template #file="{ file }">
            <div>
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-dialog v-model="previewVisible">
        <img w-full :src="previewImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form>
    <template #footer>
      <span class="dialog-footer" v-if="btnType == 'audit'">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { formatDates, timestamp } from "@/utils/utils";
import { uploadimgUrl } from "@/api/system/uploadimg";
import { TOKENT_HEADER } from "@/config/api-constant/system";
const dialogFormRef = ref(null);

const fileList = ref([]);
const previewImageUrl = ref("");
const previewVisible = ref(false);
const disabled = ref(false);

defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      audit_order_id: "",
      order_no: "",
      review_status: "",
      reason: "",
      payment_image: "",
      payment_image_show: "",
      actual_recharge_amount: "",
      receive_actual_time: "",
      warning: "",
      warning_msg: "",
      warning_result: false,
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
  dialogTitle: {
    type: String,
    default: "",
  },
  btnType: { type: String, default: "" },
  auditHistory: { type: Array, default: [] },
});
const emits = defineEmits([
  "closeDialog",
  "cancel",
  "submitForm",
  "handleUploaderImgRequest",
]);

const handleUploadSuccess = (res) => {
  if (res.code === 0) {
    ElMessage({
      message: "图片上传成功",
      type: "success",
    });
    fileList.value.push({
      name: res.data.name,
      url: res.data.pic_url,
    });
  } else {
    ElMessage({
      message: "图片上传失败",
      type: "error",
    });
    const newList = fileList.value.slice(0, fileList.value.length - 1);
    fileList.value = newList;
    return false;
  }
};
// 预览
const handlePictureCardPreview = (file) => {
  previewImageUrl.value = file.url;
  previewVisible.value = true;
};
// 删除照片
const handleRemove = (file) => {
  fileList.value = fileList.value.filter((item) => item.name != file.name);
};

const formLabelWidth = "140px";
// 校验
const rules = {
  //    order_no: [{ required: true, message: "订单流水号不能为空", trigger: "blur" }],
  warning_result: [
    { required: true, message: "请选择警告信息", trigger: "change" },
  ],
  review_status: [
    { required: true, message: "请选择审核结果", trigger: "blur" },
  ],
  review_reason: [
    { required: true, message: "请输入审核意见", trigger: "blur" },
  ],
};

const selectCheckbox = (checked) => {
  dialogFormRef.value.validateField("warning_result");
};

// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      let pay_img = [];
      let payment_images = "";
      let receive_actual_time = 0;
      if (dialogForm.receive_actual_time) {
        receive_actual_time = timestamp(
          dialogForm.receive_actual_time.valueOf()
        );
      }
      if (fileList.value.length > 0) {
        fileList.value.map((item) => {
          pay_img.push(item.name);
        });
        payment_images = pay_img.join(",");
      }
      try {
        const param = Object.assign(
          {},
          {
            audit_order_id: dialogForm.audit_order_id,
            order_no: dialogForm.order_no,
            review_status: dialogForm.review_status,
            review_reason: dialogForm.review_reason,
            //                    payment_image: dialogForm.payment_image,
            payment_image: payment_images,
            actual_recharge_amount: dialogForm.actual_recharge_amount,
            receive_actual_time: receive_actual_time,
            warning: dialogForm.warning,
            warning_result: dialogForm.warning_result ? 1 : 0,
          }
        );
        emits("submitForm", param);
      } catch (error) {
        return false;
      }
    })
    .catch((error) => {
      return false;
    });
};
</script>
